<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>首页</title>
    <script src="js/commoncss.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <style type="text/css">
        .bcopacity5{
            position: relative;
        }
        .width20{width: 20px;}
        .bcopacity5:after{display: block;content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 11;background-color: rgba(0,0,0,.5);border-radius: 6px;}
        .ml5{margin-left: 5px;}

    </style>

</head>
<body>
<div id="page" v-cloak>
    <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in swiperimgs" :key="index"><img src="images/banner1.png" class="widthp100"/></van-swipe-item>
    </van-swipe>
    <div class="widthp100 prow15 boxsizing pcol10 bbgray bcfff">
        <div class="widthp100 flex-center01">
            <div class="width80 flex-center01">
                <img :src="noticeImg" class="width20 mr10"/>
                <span class="fs12 ml5">公告：</span>
            </div>
            <div class="calc80">
                <van-swipe class="widthp100 l12 ellipsis" :autoplay="3000" vertical :show-indicators="false">
                    <van-swipe-item class="l12 widthp100" v-for="(item,index) in notices" :key="index">{{item.content}}</van-swipe-item>
                </van-swipe>
            </div>
        </div>
    </div>
    <div class="widthp100 posi-rela pl100 mb60" :class="[cart.cartCase?'mb130':'']">
        <div class="posi-rela heightp100 posi-abso left0 top0 z11 width100 steps">
        </div>
        <div class="widthp100 pt10 pr15">
            <div class="eye-list posi-rela" :class="[index==0?'stepfirst':'']" v-for="(item,index) in goods_list" :key="index">
                <div class="eye-img">
                    <div class="body-img box-shadow posi-rela" :class="[item.num>0?'bcopacity5':'']">
                        <img :src="item.imgsrc" />
                        <div class="iconfont icon-jiahao add-eye" :data-index="index" data-status="add" @click="addMinusNum"></div>
                        <div class="minus-num flex-center01" v-if="item.numisStatus">
                            <span class="fs20 c-white">{{item.num}}</span>
                            <div class="iconfont icon-jianhao munis-eye ml5" :data-index="index" data-status="munis" @click="addMinusNum"></div>
                        </div>
                    </div>
                </div>
                <div class="flex-justify">
                    <div class="calc80 tac fs12 brgray pcol5">
                        {{item.discribe}}
                    </div>
                    <div class="width80 fs12 tar pcol5">
                        剩余：{{item.residue}}副
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cart-case flex" v-if="cart.cartCase">
        <div class="calc100 num-case flex-justify">
            <div id="flex-center01" class="flex-center01">
                <div class="cart pl15  posi-rela">
                    <div class="num-case flex-center02">
                        <span class="num posi-abso">{{cart.num}}</span>

                    </div>
                    <span class="iconfont icon-gouwuche"></span>
                </div>
                <span class="ml10">已选{{cart.num}}副眼镜</span>
            </div>
            <div id="" class="fs14 pr10">
                <span>￥</span><span>{{cart.totalPrice}} （押金）</span>
            </div>
        </div>
        <div class="width100 submit flex-center02">
            提交
        </div>
    </div>
    <!-- <van-dialog v-model="show" title="标题" show-cancel-button confirm='add'>
      <img src="https://img.yzcdn.cn/vant/apple-3.jpg">
    </van-dialog> -->
    <footer-item :typeindex='typeindex'></footer-item>
</div>
</body>
<script src="js/commonjs.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common/compents.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    new Vue({
        el:'#page',
        data:function(){
            return {
                show:false,
                typeindex:0
                ,swiperimgs: [
                    'https://img.yzcdn.cn/vant/apple-1.jpg',
                    'https://img.yzcdn.cn/vant/apple-2.jpg'
                ]
                ,noticeImg:'images/喇叭%20(1).png'
                ,notices:[{content:'新用户享8折优惠~限量1000名!快分享到朋友圈领限量名额吧！'}
                    ,{content:'新用户享8折优惠~限量1000名!快分享到朋友圈领限量名额吧！'}
                    ,{content:'新用户享8折优惠~限量1000名!快分享到朋友圈领限量名额吧！'}]
                ,goods_list:[{imgsrc:'images/产品1@3x.png',discribe:'儿童款3D眼镜',residue:3,num:0,numisStatus:false,id:0,price:155}
                    ,{imgsrc:'images/产品1@3x.png',discribe:'儿童款3D眼镜',residue:6,num:0,numisStatus:false,id:1,price:99}
                    ,{imgsrc:'images/产品1@3x.png',discribe:'儿童款3D眼镜',residue:9,num:0,numisStatus:false,id:2,price:188}]
                ,cart:{num:0,cartCase:false,totalPrice:''}
            }
        },
        created:function(){
            //localStorage.removeItem('settlementgoods');
            let that=this;
            let settlementgoods = JSON.parse(localStorage.getItem('settlementgoods'));
            console.log(settlementgoods);
            if(settlementgoods){
                that.showdome(that.goods_list);
            }

        },
        methods:{
            add:function(){
                console.log(2);
            },
            addMinusNum:function(e){
                let that=this;
                let goods_list=that.goods_list;
                let status=e.currentTarget.dataset.status;
                let index=e.currentTarget.dataset.index;
                console.log(index)
                //console.log(goods_list[index].numisStatus)
                if(status=='add'){/* 增加产品 */
                    that.cart.cartCase=true;
                    //that.show=true;
                    if(that.goods_list[index].num>=that.goods_list[index].residue){

                        utils.message('此产品数量不足，请选购其他产品！')
                        return false;
                    }
                    if(that.goods_list[index].num==0){
                        that.goods_list[index].numisStatus=true;
                    }
                    that.goods_list[index].num++;
                    console.log(that.goods_list[index].num)
                    Vue.set(that.goods_list, index,that.goods_list[index]);
                    that.storagegoodsinfo(that.goods_list[index]);
                    that.showdome(that.goods_list)


                }else{/* 减去产品 */
                    console.log(that.goods_list[index])
                    if(that.goods_list[index].num==1){
                        that.goods_list[index].numisStatus=false;
                    }
                    that.goods_list[index].num--;
                    console.log(that.goods_list[index].num)
                    Vue.set(that.goods_list, index,that.goods_list[index]);
                    that.storagegoodsinfo(that.goods_list[index]);
                    that.storagegoodsinfo(that.goods_list[index]);
                    that.showdome(that.goods_list)
                }


                //if()
            },
            /* 控制下拉和减号及折扣显示、隐藏 及数据列表数量改变*/
            showdome(goods_list) {
                let settlementgoods = JSON.parse(localStorage.getItem('settlementgoods'));
                let that = this;
                let num=0;
                if (settlementgoods.length >= goods_list.length) {
                    for (let i = 0; i < settlementgoods.length; i++) {
                        for (let j = 0; j < goods_list.length; j++) {
                            if (settlementgoods[i].id == goods_list[j].id) {
                                goods_list[j].numisStatus = settlementgoods[i].numisStatus;
                                goods_list[j].num = settlementgoods[i].num;
                                num +=goods_list[j].num;
                            }
                        }
                    }
                } else {
                    for (let i = 0; i < goods_list.length; i++) {
                        for (let j = 0; j < settlementgoods.length; j++) {
                            if (goods_list[i].id == settlementgoods[j].id) {
                                goods_list[i].numisStatus = settlementgoods[j].numisStatus;
                                goods_list[i].num = settlementgoods[j].num;
                                num +=goods_list[i].num;
                            };
                        }
                    }
                };
                console.log(num);
                that.cart.num=num;
                if(settlementgoods.length>0){
                    that.cart.cartCase=true;
                }else{
                    that.cart.cartCase=false;
                }
                that.totalprice();

            },
            /* 加减产品加入购物车函数及删除购物车产品 */
            storagegoodsinfo(currengoodlist) {
                /* 把产品加入结算中心 */
                let that = this;
                if (currengoodlist.num < 1) {
                    let settlementgoods = JSON.parse(localStorage.getItem('settlementgoods'));
                    currengoodlist.numisStatus = false;
                    for (var i = 0; i < settlementgoods.length; i++) {
                        if (settlementgoods[i].id == currengoodlist.id) {
                            settlementgoods.splice(i, 1);
                            localStorage.setItem('settlementgoods', JSON.stringify(settlementgoods));
                            break;
                        };
                    }
                } else {
                    currengoodlist.numisStatus = true;
                    let settlementgoods = JSON.parse(localStorage.getItem('settlementgoods'));
                    if (!settlementgoods) {
                        settlementgoods = [];
                        settlementgoods.push(currengoodlist);
                        localStorage.setItem('settlementgoods', JSON.stringify(settlementgoods));
                    } else {
                        let settlementgoods = JSON.parse(localStorage.getItem('settlementgoods'));
                        let arrfalse = false;
                        for (var i = 0; i < settlementgoods.length; i++) {
                            if (settlementgoods[i].id == currengoodlist.id) {
                                settlementgoods.splice(i, 1, currengoodlist); /* 替换数组中的相同项 */
                                localStorage.setItem('settlementgoods', JSON.stringify(settlementgoods));
                                arrfalse = true;
                                break;
                            };
                        }
                        if (arrfalse == false) {
                            settlementgoods.push(currengoodlist);
                            localStorage.setItem('settlementgoods', JSON.stringify(settlementgoods));

                        }
                    }
                }
                /* 计算总价 */
                that.totalprice();
            },
            /* 计算总价及渲染购物车数据 */
            /* 计算总价 */
            totalprice(e) {
                let that = this;

                let settlementgoods = JSON.parse(localStorage.getItem('settlementgoods'));
                console.log(settlementgoods);
                let totalPrice = 0;
                for (let i = 0; i < settlementgoods.length; i++) {
                    totalPrice += settlementgoods[i].num * settlementgoods[i].price;
                }
                totalPrice = totalPrice.toFixed(2);
                console.log(totalPrice);
                that.cart.totalPrice=totalPrice;

            }
        }

    })

</script>


</html>
